@import "variable";
@import "../../dist/css/sprite";
@import "../font/awesome/less/font-awesome";

body {
  background-color: #fdfcf8;
}
.my-container {
  margin: 40px auto;
  padding:0;
}

.nav {
  position: relative;
  margin-top: 20px;
  height: 100px;
  .nav-item {
    position: relative;
    float: left;
    width: 200px;
    height: 100px;
    margin-right: 15px;
    .text {
      position: absolute;
      top: 0;
      left: 0;
      width: 200px;
      height: 100px;
      background-color: #dadada;
      transition: transform .2s linear;
      transform: rotateX(90deg) translateZ(100px);
      transform-origin: bottom;
    }
    img {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 100%;
      height: 100%;
      transition: transform .2s linear;
      transform-origin: top;
    }
    &:hover {
      .text {
        transform: rotateX(0deg) translateZ(0px);
      }
      img {
        transform: rotateX(-90deg) translateZ(100px);
      }
    }
  }
}

.icon {
  display: block;
  .sprite(@guide-icon);
}

.arrow {
  .sprite(@arrow);
  opacity: 1;
}

.upimg-box {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  .box-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(16, 21, 39, 0.6);
    z-index: 9;
  }
  .box-content {
    position: absolute;
    width: 600px;
    height: 475px;
    left: 50%;
    top: 50%;
    margin-top: -236px;
    margin-left: -300px;
    z-index: 10;
    background-color: #fff;
    padding: 15px;
    .img-box {
      position: relative;
      height: 400px;
      width: 400px;
      overflow: hidden;
      cursor: move;
      .thumb-box {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 200px;
        height: 200px;
        margin-top: -100px;
        margin-left: -100px;
        box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.5);
        background: none repeat scroll 0 0 transparent;
        border-radius: 50%;
      }
      .spinner {
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        text-align: center;
        line-height: 400px;
        background: rgba(0, 0, 0, 0.7);
      }
    }
    .img-action {
      margin-top: 15px;
      line-height: 30px;
      font-size: 14px;
      color: #FFFFFF;
      .btn-up {
        .up-img {
          display: inline-block;
          width: 165px;
          height: 30px;
          background-color: #f38e81;
          border-radius: 3px;
          text-decoration: none;
          cursor: pointer;
          text-align: center;
          &:hover {
            background-color: #d6796d;
          }
        }
        input[type=file] {
          display: none;
        }
      }
      .btn-zoom-in, .btn-zoom-out, .btn-crop {
        display: inline-block;
        width: 66px;
        height: 30px;
        background-color: #f38e81;
        border-radius: 3px;
        cursor: pointer;
      }
    }
  }
  .cropped {
    position: absolute;
    width: 170px;
    text-align: center;
    right: 5px;
    top: 15px;
    color: #333;
    .big-img {
      width: 128px;
      height: 128px;
    }
    .small-img {
      width: 64px;
      height: 64px;
    }
    > span {
      display: inline-block;
      border-radius: 50%;
      border: 1px solid #f5f5f5;
      margin-top: 30%;
      overflow: hidden;
      > img {
        display: none;
      }
    }
  }
}

.up-user-img {
  cursor: pointer;
}

.rolling-box {

}

.rolling {
  position: relative;
  li {
    float: left;
    margin-right: 10px;
    img {
      display: block;
    }
  }
}


